<template>
  <div class="app-container">
    <div style="display: flex; justify-content: space-between; margin-bottom:10px;">
      <el-button type="primary" icon="el-icon-plus" style="width:28%" @click="handleDialog(true)">添加</el-button>
      <el-input placeholder="查询角色名称" v-model="search" class="input-with-select" style="width:68%" @keyup.enter.native="fetchData()">
        <el-button slot="append" icon="el-icon-search" @click="fetchData()" />
      </el-input>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="110">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="角色ID" width="110">
        <template slot-scope="scope">
          {{ scope.row.roleid }}
        </template>
      </el-table-column>
      <el-table-column label="角色名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.rname }}
        </template>
      </el-table-column>
      <el-table-column label="角色权限" align="center" width="200">
        <template slot-scope="scope">
          <el-popover
            placement="top"
            width="300"
            trigger="hover"
          >
            <el-tag v-for="item in scope.row.auths" :key="item.authid">
              {{ item.aname }} ({{ item.desc }}) 
            </el-tag>
            <el-button type="primary" slot="reference" size="small">查看权限</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="small" @click="handleDialog(false,scope.row.roleid)">修改</el-button>
          <el-popconfirm :title="delTit(scope.row.rname)" @onConfirm="deleteItem(scope.row.roleid)">
            <el-button slot="reference" type="danger" icon="el-icon-delete" size="small" style="margin-left:10px">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top:10px"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-size="pageData.pageSize"
      :total="pageData.total"
      :current-page.sync="pageData.pageNum"
      :page-count="pageData.pages"
      @current-change="changPage"
      @size-change="changePageSize"
    />
    <RoleDialog :vm="this" />
  </div>
</template>

<script>
import RoleDialog from '@/components/Dialog/RoleDialog'
import { mapGetters } from 'vuex'

export default {
  components: { RoleDialog },
  data() {
    return {
      search: '',
      list: null,
      listLoading: true,
      pageData: {
        total: 0,
        pageNum: 1,
        pages: 1,
        pageSize: 10
      },
      dialogFormVisible: false,
      selRoleid: null,
      isAdd: true,
      options:[],
      auths: []
    }
  },
  created() {
    this.fetchAuthData()
    this.fetchData()
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  methods: {
    changPage(value) {
      this.fetchData(value, this.pageData.pageSize)
    },
    changePageSize(value) {
      this.fetchData(this.pageData.pageNum, value)
    },
    fetchAuthData() {
      var vm = this
      this.axios({
        method: 'post',
        url: 'http://localhost:8080/auth/getList',
        data: {
          pageNum: 1,
          pageSize: 1000
        },
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        }
      }).then((response) => {
        if (response.data && response.status === 200) {
          vm.auths = response.data.list.map((item,i) => ({ label: item.aname, value: item.authid }) )
        }

      })
    },
    fetchData(pageNum = pageNum || this.pageData.pageNum, pageSize = pageSize || this.pageData.pageSize) {
      this.listLoading = true
      var vm = this
      this.axios({
        method: 'post',
        url: 'http://localhost:8080/role/getList',
        data: {
          pageNum,
          pageSize,
          keyword: this.search
        },
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        }
      }).then((response) => {
        if (response.data && response.status === 200) {
          vm.list = response.data.list
          this.pageData = {
            total: response.data.total,
            pageNum: response.data.pageNum,
            pages: response.data.pages,
            pageSize: response.data.pageSize
          }
        }
        vm.listLoading = false
      }).catch((err) => {
        console.log(err)
        vm.listLoading = false
      })
    },
    handleDialog(isAdd, roleid) {
      this.isAdd = isAdd
      if(!isAdd){
        this.selRoleid = roleid
      }
      this.dialogFormVisible = true
    },
    delTit(value) {
      return "确定要删除名称为 " + value + " 的角色吗？"
    },
    deleteItem(value) {
      this.axios({
          method: 'delete',
          url: 'http://localhost:8080/role/delete',
          data: {
              roleid: value
          },
          headers: {
          'Content-Type': 'application/json;charset=utf-8'
          }
      }).then((response) => {
          if(response.data&&response.data.code === 1000){
              this.$message.success(response.data.message)
          }else{
              this.$message.error(response.data.message)
          }
          this.fetchData()
      })
    }
  }
}
</script>
